<template>
  <div class="dashboard-container">
    <el-card style="height: 120px; margin-bottom: 20px">
      <!-- 给el-form绑定form -->
      <el-form label-width="80px" :model="form" :inline="true">
        <!-- <el-form-item>
          <el-input v-model="form.name" placeholder="名称" clearable />
        </el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="searchclick"
          style="margin-left: 12px"
          >筛选</el-button
        >
        <el-button @click="resetSearch">重置</el-button> -->
        <el-button @click="addrenyuan" type="success">添加</el-button>
      </el-form>
    </el-card>
    <el-table :data="tableData" border>
      <el-table-column prop="id" label="ID" align="center"> </el-table-column>
      <el-table-column label="图片" align="center">
        <template slot-scope="scope">
          <el-image
            :src="scope.row.image"
            fit="cover"
            style="width: 200px"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="类型" align="center">
        <template slot-scope="{ row }">
          <el-tag type="success" v-if="row.status == 1">文案页</el-tag>
          <el-tag type="parimary" v-if="row.status == 2">批发页</el-tag>
          <el-tag type="warning" v-if="row.status == 3">耗材页</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="changerenyuan(scope.row)"
            >修改</el-button
          >
          <el-button type="danger" @click="deldel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <add ref="add" @refresh="refresh"></add>
  </div>
</template>

<script>
import { getbannerlist, delbannerdel } from "@/api/couponlist";
import add from "./modules/add";
export default {
  name: "Dashboard",
  components: {
    add,
  },
  data() {
    return {
      form: {
        servetypeid: "",
      },
      total: 0,
      tableData: [],
    };
  },
  methods: {
    searchclick() {
      this.getbannerlist1();
    },
    resetSearch() {
      this.form.name = "";
      this.getbannerlist1();
    },
    addrenyuan() {
      this.$refs.add.add();
    },
    // 子传父:自定义事件
    refresh() {
      this.getbannerlist1();
    },
    async getbannerlist1() {
      let result = await getbannerlist();
      console.log(result);
      if (result.code == 0) {
        if (result.data != []) {
          this.tableData = result.data;
        }
      }
    },
    changelimit(val) {
      this.form.pageSize = val;
      this.getbannerlist1();
    },
    changecurrentPage(val) {
      this.form.pageNo = val;
      this.getbannerlist1();
    },
    changerenyuan(val) {
      this.$refs.add.edit(val);
    },
    async deldel(val) {
      let result = await delbannerdel({ id: val.id ,adminid:Number(localStorage.getItem('userId'))});
      if (result.code == 0) {
        this.$message({
          showClose: true,
          message: "删除图片成功",
          type: "success",
        });
        this.getbannerlist1();
      }
    },
  },
  watch: {
    "form.servetypeid": {
      handler(newVal) {
        if (newVal == "") {
          this.getbannerlist1();
        }
      },
    },
  },
  mounted() {
    this.getbannerlist1();
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
